<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import { useRouter } from 'vue-router'
import { NavigationActions, NavigationLinks } from '@/constants/navigation'
import { MenuItemKey } from '@/enums/navigation'
import { useMouseEvent } from '@/hooks/use-mouse-event'
import { useAppStore } from '@/stores/app'
import type { TMenuItem, TMenuItemKey } from '@/types/navigation'
import LotteryMenu from './LotteryMenu.vue'

const appStore = useAppStore()

const router = useRouter()

const contentRef = ref<HTMLElement>()

const { targetRef } = useMouseEvent((_, isEnter) => {
  if (isEnter) {
    contentRef.value?.classList.remove('opacity-0')
    contentRef.value?.classList.add('opacity-100')
  } else {
    contentRef.value?.classList.remove('opacity-100')
    contentRef.value?.classList.add('opacity-0')
  }
})

const links = shallowRef<TMenuItem[]>(NavigationLinks)

const actions = shallowRef<TMenuItem[]>(NavigationActions)

const isUserClicked = ref(false)

function checkUserClickStatus() {
  if (!isUserClicked.value) {
    isUserClicked.value = true
    appStore.toggleAudio()
  }
}

function handleClickItem(key: TMenuItemKey) {
  checkUserClickStatus()

  switch (key) {
    case MenuItemKey.OPENING:
      appStore.pause()
      router.push('/opening')
      return
    case MenuItemKey.CLOSING:
      appStore.pause()
      router.push('/closing')
      return
    case MenuItemKey.GUIDANCE:
      appStore.pause()
      router.push('/guidance')
      return
    case MenuItemKey.SCAN_CODE_LOTTERY:
      appStore.switchAudio('LOTTERY')
      appStore.navigateToScanCodeLottery()
      return
    case MenuItemKey.NAME_LIST_LOTTERY:
      appStore.switchAudio('LOTTERY')
      appStore.navigateToNameListLottery()
      return
    case MenuItemKey.NEW_LOTTERY:
      appStore.switchAudio('LOTTERY')
      router.push('/new-lottery')
      return
    case MenuItemKey.QR_CODE:
      appStore.toggleQrcodeVisibility()
      return
    case MenuItemKey.FULL_SCREEN:
      appStore.toggleFullscreen()
      return
    case MenuItemKey.SOUND:
      appStore.toggleAudio()
      return
    case MenuItemKey.CLEAR:
      appStore.openClear()
      return
  }
}
</script>

<template>
  <nav ref="targetRef" class="absolute bottom-0 left-0 right-0 z-50">
    <div ref="contentRef" class="opacity-0">
      <div class="flex justify-between items-center w-screen h-28 bg-black/45">
        <LotteryMenu :items="links" @click:item="handleClickItem" />
        <LotteryMenu :items="actions" @click:item="handleClickItem" />
      </div>
    </div>
  </nav>
</template>
